<template>
<div>
  <!-- 面包屑导航区域 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item >首页</el-breadcrumb-item>
    <el-breadcrumb-item>数据统计</el-breadcrumb-item>
    <el-breadcrumb-item>数据报表</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 卡片视图区域 -->
  <el-card>
    <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="bar" style="width: 80%;height:400px;"></div>
  </el-card>
  <!-- 卡片视图区域 -->
  <el-card>
    <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="category" style="width: 80%;height:400px;"></div>
  </el-card>

</div>
</template>

<script>
import axios from "axios";
import _ from 'lodash'
import ECharts from "echarts"

export default {
  name: "graphical",
  data(){
    return{
		option:{
			
		}
		
    }
  },
  created() {
  },
  methods:{
	  //得到所有分类类型的数据
	 getTypeList(){
		 var this_=this;
		 axios.get("type/getBar").then(ret => {
		   if (ret.flag) {//得到数据成功
		 	console.log(ret.data);
		  console.log(ret.data.xdata)
			const myChart=this.$echarts.init(document.getElementById('bar'));
			// 指定图表的配置项和数据
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption({
				title: {
				  text: '问卷类型条形图'
				},
				tooltip: {},
				legend: {
				  data: ['问卷数量']
				},
				toolbox: {
				    feature: {
				        saveAsImage: {}
				    }
				},
				xAxis: {
				  name:'问卷类型',
				  data: ret.data.xdata//横坐标赋值
				},
				yAxis: {},
				series: [{
				  name: '问卷数量',
				  type: 'bar',
				  data: ret.data.ydata//纵坐标赋值
				}]
			});
			
		   } else {
		 	this_.$message.success("查询柱状图失败");
		   }
		 })
	 },
	 getQuestionCountList(){
		 var this_=this;
		 axios.get("question/getQueCountLine").then(ret =>{
			 if(ret.flag){
				const myChart=this.$echarts.init(document.getElementById('category'));
				myChart.setOption({
					title: {
					    text: '折线图堆叠'
					},
					tooltip: {
					    trigger: 'axis'
					},
					legend: {
					    data: ['问卷回答人数', '问卷问题数量']
					},
					grid: {
					    left: '6%',
					    bottom: '3%',
					    containLabel: true
					},
					toolbox: {
					    feature: {
					        saveAsImage: {}
					    }
					},
					xAxis: {
						name:'问卷序号',
					    type: 'category',
					    boundaryGap: false,
					    data: ret.data.xdata//横坐标赋值
					},
					yAxis: {
					    type: 'value'
					},
					series: [
					    {
					        name: '问卷回答人数',
					        type: 'line',
					        stack: '总量',
					        data: ret.data.ydata//纵坐标赋值
					    }
					]
				});
				}else{
					this.$message.error("查询折线图数据失败");
			 }
		 });

	 }
	 
	 
  },
  mounted() {
	//得到对应类型的问卷的柱形图
	this.getTypeList();
	//得到问卷回答数量的折线图
	this.getQuestionCountList();
  }
}
</script>

<style scoped lang="less">
.el-card{
  margin-top: 15px;
}

</style>
